<template>
  <div style="width: 100%;display: flex">
    <div style="width: 140px">护理项目名称</div>
    <div style="width: 140px">期望服务时间</div>
    <div style="width: 130px">执行周期</div>
    <div style="width: 140px">执行频次（次）</div>
  </div>
  <div v-for="(item,index) in projects" :key="item" style="width: 100%;margin-top: 6px">
    <el-select v-model="projects[index].projectId" placeholder="Select" style="width: 130px;margin-right: 10px">
      <el-option
          v-for="sub in options"
          :key="sub.id"
          :label="sub.name"
          :value="sub.id"
      />
    </el-select>
    <el-time-select
        v-model="projects[index].executeTime"
        style="width: 120px;margin-right: 20px"
        start="08:30"
        step="00:15"
        end="18:30"
    />
    <el-select v-model="projects[index].executeCycle" placeholder="Select" style="width: 100px;margin-right: 20px">
      <el-option
          v-for="sub in execCycle"
          :key="sub.id"
          :label="sub.label"
          :value="sub.id"
      />
    </el-select>
    <el-input v-model="projects[index].executeFrequency" style="width: 140px;margin-right: 20px" placeholder="请输入"/>
    <el-icon @click="()=>projects=[...projects,{}]" style="cursor: pointer">
      <Plus/>
    </el-icon>
    <el-icon v-show="projects.length!==1" @click="projects=projects.filter((_,subI)=>subI!==index)"
             style="margin: 0 10px;;cursor: pointer">
      <Minus/>
    </el-icon>
  </div>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {getNurseProjectList} from "@/api/nursing/nursingProject.js";

const projects = defineModel()
const options = ref([]);
const execCycle = [
  {id: 0, label: "每日"},
  {id: 1, label: "每周"},
  {id: 2, label: "每月"}
];

const getNursingItems = async () => {
  const data = await getNurseProjectList();
  options.value = data;
}

onMounted(() => {
  getNursingItems();
})
</script>
<style lang="less" scoped>

</style>